import React from 'react'
import ReactDOM from 'react-dom'
import Tabs from 'react-simpletabs'


import * as BillBoardAction  from '../../actions/BillboardAction';
import { connect }  from 'react-redux';

import BillboardSettingTools from './BillboardSettingTools'
import BillboardSettingList from './BillboardSettingList'
import BillboardSettingEdit from './BillboardSettingEdit'

import MenuSettingAssetSelect from '../MenuSettingAssetSelect'

import Paging from '../Paging'

class BillboardSettingBody extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activeData: {},
      currentType: '小区公告'
    }

  }

  componentDidMount() {
    this.$editModal = $(ReactDOM.findDOMNode(this.refs.BillboardSettingEdit))
    this.$assetModal = $(ReactDOM.findDOMNode(this.refs.MenuSettingAssetSelect))
    this.props.dispatch(
      BillBoardAction.loadBillboardAsync({
        type: this.state.currentType,
        limit: 6
      })
    )
  }

  componentDidUpdate() {
    console.log(this.props.data)
  }

  onNewBillboardClick(){
    this.setState({
      activeData: {}
    })
    this.$editModal.modal("show")
  }

  onNewBillboardSubmit(data){
    this.$editModal.modal("hide")
    var content = data.content;
    data.content = JSON.stringify(content)
    data.limit = this.props.limit;
    this.props.dispatch(
      BillBoardAction.createBillboardAsync(data)
    )
    this.setState({
      activeData: {}
    })

    $('.tabs-menu').find("li").removeClass('is-active');
    switch (data.type) {
      case '小区公告':
        $(ReactDOM.findDOMNode(this.refs.billboard)).addClass('is-active')
        break;
      case '小区活动':
        $(ReactDOM.findDOMNode(this.refs.activity)).addClass('is-active')
        break;
      case '办事指南':
        $(ReactDOM.findDOMNode(this.refs.guide)).addClass('is-active')
        break;
      case '周边生活':
        $(ReactDOM.findDOMNode(this.refs.surroundings)).addClass('is-active')
        break;
      case '享生活':
        $(ReactDOM.findDOMNode(this.refs.liftStyle)).addClass('is-active')
        break;
      default:
    }

  }

  onSelectAsset() {
    this.$assetModal.modal("show")
  }

  onPageChange(page) {
    var self = this;
    this.props.dispatch(
      BillBoardAction.loadBillboardAsync({
        offset: (page-1)*this.props.limit,
        limit: self.props.limit,
        type: this.state.currentType
      })
    )
  }

  onAssetGridClick(media_id, data) {
    this.$assetModal.modal("hide")
    var activeData = this.state.activeData;
    if (data.news_item.length > 0) {
      activeData.content = {
        news_item: data.news_item
      }
      activeData.title = data.news_item[0].title;
      activeData.description = data.news_item[0].digest;
      activeData.img_url = data.news_item[0].thumb_media_id;
      activeData.url = data.news_item[0].url;
    }

    this.setState({
      activeData: activeData
    })
  }

  onBillboardPublish(data) {
    if (confirm("确认发布该公告吗?")) {
      data.status = 5;
      data.offset = this.props.offset;
      data.limit = this.props.limit;
      data.type = this.props.type;
      this.props.dispatch(
        BillBoardAction.updateStatusBillboardAsync(data)
      )
    }
  }

  onBillboardUpdate(event, data) {
    var content = data.content;
    var activeData = {
      id: data.id,
      title: data.title,
      content: JSON.parse(content),
      description: data.description,
      url: data.url,
      img_url: data.img_url,
      type: data.type,
      created_at: data.created_at,
      updated_at: data.updated_at
    }
    this.setState({
      activeData: activeData
    })
    this.$editModal.modal("show")
  }

  onBillboardUpdateSubmit(data) {
    data.offset = this.props.offset;
    data.limit = this.props.limit;
    data.content = JSON.stringify(data.content)
    data.type = this.state.currentType;
    data.offset = this.props.offset;
    data.limit = this.props.limit;
    this.props.dispatch(
      BillBoardAction.updateBillboardAsync(data)
    )
    this.$editModal.modal("hide")
    this.setState({
      activeData: {}
    })
  }

  onBillboardDelete(event, data) {
    if (confirm("确认删除该公告吗?")) {
      data.offset = this.props.offset;
      data.limit = this.props.limit;
      data.type = this.state.currentType;
      this.props.dispatch(
        BillBoardAction.deleteBillboardAsync(data)
      )
    }
  }

  // 选择公告类型
  onTabClick(event,cat){
    var li = $(event.target).parent();
    $('.tabs-menu').find("li").removeClass('is-active');
    li.addClass('is-active');
    if (this.state.currentType != cat) {
      this.props.dispatch(
        BillBoardAction.loadBillboardAsync({
          type: cat,
          limit: this.props.limit
        })
      )
    }
    this.setState({
      currentType: cat
    })
  }

  render() {
    var self = this;
    // var data = this.props.data;
    var offset = parseInt(this.props.offset),
        limit = parseInt(this.props.limit),
        count = parseInt(this.props.count)

    var current = Math.ceil(offset/limit) + 1;
    // console.log(data);
    return (

      <div className="content-body billboard-content-body" >
        <BillboardSettingTools
          onNewBillboardClick={this.onNewBillboardClick.bind(self)}
        />
        <div className="tabs">
          <nav className="tabs-navigation">
            <ul className="tabs-menu">
              <li ref="billboard" className="tabs-menu-item is-active" onClick={(event)=>this.onTabClick(event,"小区公告")}>
                <a>小区公告</a>
              </li>
              <li ref="activity" className="tabs-menu-item" onClick={(event)=>this.onTabClick(event,"小区活动")}>
                <a>小区活动</a>
              </li>
              <li ref="guide" className="tabs-menu-item" onClick={(event)=>this.onTabClick(event,"办事指南")}>
                <a>办事指南</a>
              </li>
              <li ref="surroundings" className="tabs-menu-item" onClick={(event)=>this.onTabClick(event,"周边生活")}>
                <a>周边生活</a>
              </li>
              <li ref="liftStyle" className="tabs-menu-item" onClick={(event)=>this.onTabClick(event,"享生活")}>
                <a>享生活</a>
              </li>
            </ul>
          </nav>
          <article className="tab-panel">
            <div>
              <BillboardSettingList
                type = {this.state.currentType}
                data = {this.props.data}
                onBillboardUpdate = {this.onBillboardUpdate.bind(self)}
                onBillboardDelete = {this.onBillboardDelete.bind(self)}
                />
            </div>
          </article>
        </div>



        <Paging
          current = {current}
          count = {count}
          limit = {limit}
          onPageChange = {this.onPageChange.bind(self)}
        />


        <BillboardSettingEdit
          ref = "BillboardSettingEdit"
          data = {this.state.activeData}
          onSelectAsset = {this.onSelectAsset.bind(self)}
          onBillboardUpdateSubmit = {this.onBillboardUpdateSubmit.bind(self)}
          onNewBillboardSubmit = {this.onNewBillboardSubmit.bind(self)}
          />
        <MenuSettingAssetSelect
          wechat = {this.props.wechat}
          onAssetGridClick = {this.onAssetGridClick.bind(self)}
          ref="MenuSettingAssetSelect"/>
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    billboard: state.billboard,
    data: state.billboard.data,
    offset: state.billboard.offset,
    limit: state.billboard.limit,
    count: state.billboard.count
  }
}

export default  connect(mapStateToProps)(BillboardSettingBody)
